<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="UTF-8">
	<title>超市订单管理系统</title>
	<link type="text/css" rel="stylesheet" href="css/style.css"/>
	<link type="text/css" rel="stylesheet" href="css/public.css"/>
	<!-- 引入样式 -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
	<!--头部-->
	<header class="publicHeader">
		<h1>超市订单管理系统</h1>
		<div class="publicHeaderR">
			<p><span>下午好！</span><span style="color: #fff21b"> 系统管理员</span> , 欢迎你！</p>
			<a href="jsp/logout.do">退出</a>
		</div>
	</header>
	<!--时间-->
	<section class="publicTime">
		<span id="time">2015年1月1日 11:11  星期一</span>
		<a href="#">温馨提示：为了能正常浏览，请使用高版本浏览器！（IE10+）</a>
	</section>
	<!--主体内容-->
	<section class="publicMian ">
		<div class="left">
			<h2 class="leftH2"><span class="span1"></span>功能列表 <span></span></h2>
			<nav>
				<ul class="list">
					<li><a href="jsp/bill.do?method=query">订单管理</a></li>
					<li><a href="jsp/provider.do?method=query">供应商管理</a></li>
					<li><a href="user.html">用户管理</a></li>
					<li><a href="jsp/pwdmodify.jsp">密码修改</a></li>
					<li><a href="jsp/logout.do">退出系统</a></li>
				</ul>
			</nav>
		</div>
		<input type="hidden" id="path" name="path" value="/SMBMS"/>
		<input type="hidden" id="referer" name="referer"
			   value="http://localhost:8080jsp/provider.do?method=query&queryProCode=&queryProName="/>
		<div class="right">
			<div class="location">
				<strong>你现在所在的位置是:</strong>
				<span>用户管理页面</span>
			</div>
			<div class="search">
				<span>用户名：</span>
				<input class="input-text" type="text" v-model="searchForm.name">

				<span>用户角色：</span>
				<select v-model="searchForm.role">
					<option value="0">--请选择--</option>
					<option v-for="r in roles" :value="r.id">{{r.roleName}}</option>
				</select>

				<input type="hidden" name="pageIndex" value="1"/>
				<input value="查 询" type="button" id="searchbutton" @click="searchUser(1)">
				<a href="user_save.html">添加用户</a>
			</div>
			<!--用户-->
			<table class="providerTable" cellpadding="0" cellspacing="0">
				<tr class="firstTr">
					<th width="10%">用户编码</th>
					<th width="20%">用户名称</th>
					<th width="10%">性别</th>
					<th width="10%">年龄</th>
					<th width="10%">电话</th>
					<th width="10%">用户角色</th>
					<th width="30%">操作</th>
				</tr>

				<tr v-for="e in result.data">
					<td>
						<span>{{e.userCode}}</span>
					</td>
					<td>
						<span>{{e.userName}}</span>
					</td>
					<td>
						<span>{{e.gender === 1 ? '女' : '男'}}</span>
					</td>
					<td>
						<span>{{e.userAge}}</span>
					</td>
					<td>
						<span>{{e.phone}}</span>
					</td>
					<td>
						<span>{{e.role.roleName}}</span>
					</td>
					<td>
                        <span>
                            <a class="viewUser" href="javascript:;" @click="showUser(e)">
                                <img src="images/read.png" alt="查看" title="查看"/>
                            </a>
                        </span>
						<span>
                            <a class="modifyUser" href="javascript:;" @click="showUpdateUser(e)">
                            <img src="images/xiugai.png" alt="修改" title="修改"/>
                            </a>
                        </span>
						<span>
                            <a class="deleteUser" href="javascript:;" @click="removeUser(e)">
                                <img src="images/schu.png" alt="删除" title="删除"/>
                            </a>
                        </span>
					</td>
				</tr>


			</table>
			<input type="hidden" id="totalPageCount" value="3"/>


			<div class="page-bar">
				<ul class="page-num-ul clearfix" v-if="type===1">
					<li>共{{result.total}}条记录&nbsp;&nbsp; {{result.pageNumber}}/{{result.pages}}页</li>

					<a href="#" @click="loadUserData(1)" v-if="result.prevPage>0">首页</a>
					<a href="#" @click="loadUserData(result.prevPage)" v-if="result.prevPage>0">上一页</a>
					<a href="#" @click="loadUserData(result.nextPage)"
					   v-if="result.pageNumber!==result.pages">下一页</a>
					<a href="#" @click="loadUserData(result.pages)" v-if="result.pageNumber!==result.pages">最后一页</a>

					&nbsp;&nbsp;
				</ul>
				<ul class="page-num-ul clearfix" v-else-if="type===2">
					<li>共{{result.total}}条记录&nbsp;&nbsp; {{result.pageNumber}}/{{result.pages}}页</li>

					<a href="#" @click="searchUser(1)" v-if="result.prevPage>0">首页</a>
					<a href="#" @click="searchUser(result.prevPage)" v-if="result.prevPage>0">上一页</a>
					<a href="#" @click="searchUser(result.nextPage)"
					   v-if="result.pageNumber!==result.pages">下一页</a>
					<a href="#" @click="searchUser(result.pages)" v-if="result.pageNumber!==result.pages">最后一页</a>

					&nbsp;&nbsp;
				</ul>
				<span class="page-go-form"><label>跳转至</label>
	     <input type="number"
				name="inputPage" id="inputPage" class="page-key"
				v-model="sendPages" :max="result.pages" :min="1"/>页
	     <button type="button" class="page-btn"
				 @click='loadUserData(sendPages)'>GO</button>
		</span>
			</div>
		</div>
	</section>

	<!--点击删除按钮后弹出的页面-->
	<div class="zhezhao"></div>
	<div class="remove" id="removeUse">
		<div class="removerChid">
			<h2>提示</h2>
			<div class="removeMain">
				<p>你确定要删除该用户吗？</p>
				<a href="#" id="yes">确定</a>
				<a href="#" id="no">取消</a>
			</div>
		</div>
	</div>


	<footer class="footer">
		版权归关老师
	</footer>
</div>
<script type="text/javascript" src="js/time.js"></script>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="calendar/WdatePicker.js"></script>
</body>
</html>
<script type="text/javascript" src="js/userlist.js"></script>

<script src="js/vue.min.js"></script>
<script src="js/axios.min.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
	new Vue({
		el: '#app',
		data() {
			return {
				result: {},  // 分页信息
				sendPages: '',  // 跳转的页面
				roles: [],  // 所有角色信息
				searchForm: {
					name: '',
					role: 0
				},
				type: 1 //1:全查询  2:检索
			}
		},
		methods: {
			loadUserData(page) {
				if (page < 1 || page > this.result.pages) {
					this.$message({
						message: '你输入的页面不合适',
						type: 'error'
					});
					return;
				}
				axios.get('user_find', {
					params: {
						page: page
					}
				}).then(response => {
					this.result = response.data
					this.type = 1
				})
			},
			loadRoleData() {
				axios.get('role_find')
						.then(response => {
							this.roles = response.data
						})
			},
			searchUser(page) {
				axios.get('user_search', {
					params: {
						name: this.searchForm.name,
						role: this.searchForm.role,
						page: page
					}
				}).then(response => {
					//console.log(response.data)
					this.result = response.data
					this.type = 2
				})
			},
			showUser(e) {
				// console.log(e);
				// 将e对象转换成JSON格式的字符串存放到session
				// 第一种写法
				// sessionStorage.setItem('USER', JSON.stringify(e))
				sessionStorage.setItem('USER_ID', e.id)
				location.href = 'user_show.html'
			},
			removeUser(e) {
				this.$confirm('你确认要删除【' + e.userName + '】么？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					// 点击确定的操作
					axios({
						method: 'delete',
						url: 'user_remove',
						params: {
							id: e.id
						}
					}).then(response => {
						if (response.status === 200) {
							let beforeTotal = this.result.total
							let pn = this.result.pageNumber
							if (beforeTotal % 5 === 1) {
								pn = pn - 1
							}
							// 刷新表格
							this.loadUserData(pn)
							// 弹出内容
							this.$message({
								message: '删除【' + e.userName + '】成功',
								type: 'success'
							});
						} else {
							this.$message({
								message: '删除【' + e.userName + '】失败',
								type: 'error'
							});
						}
					})
				}).catch(() => {
					// 点击取消的操作
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			showUpdateUser(e) {
				sessionStorage.setItem('USER_UPDATE', JSON.stringify(e))
				location.href = 'user_update.html'
			}
		},
		created() {
			this.loadUserData(1)
			this.loadRoleData()
		}
	})
</script>